<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @tap="backOne">
				取消
			</view>
			<view class="top-bar-center">
				创建群聊
			</view>
		</view>
		<view class="main">
			<view class="main-top">
				<view class="group-avatar">
					<ImageCropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></ImageCropper>
					<image :src="cropFilePath" @tap="upload" class="avatar"></image>
					<image src="../../static/img/group/pen.png" class="pen"></image>
				</view>
				<view class="group-name">
					<input type="text" placeholder="群名称" v-model="name" @blur="nameExist">
				</view>
				<view class="title">
					用户
				</view>
			</view>

			<view class="group-list">			
				<view class="member" v-for="(item,i) in user" :key="i">
					<view class="choose" :style="{background:item.choose?'#FFE431':'rgba(255,228,49,0.50)'}"
						@tap="choose(i)">
						<i class="iconfont icon-duihao dui" v-if="item.ischoose"></i>
					</view>
					<view class="avatar">
						<image :src="item.avatar"></image>
					</view>
					<view class="username">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="group-bottom">
			<view class="group-btn" :style="{background:btn}" @tap="newGroup">
				创建（{{selectuser.length}}）
			</view>
		</view>
	</view>
</template>

<script>
	import datas from '../../common/js/datas.js'
	import ImageCropper from '@/components/ling-imgcropper/ling-imgcropper.vue'
	import   {mapState} from 'vuex'
	export default {
		data() {
			return {
				// 群昵称
				name: '',
				background: 'rgba(255,228,49,0.50)',
				user: [],
				cropFilePath: '../../static/img/img/group.png',
				tempFilePath: "",
				selectuser:[],
				flag:false,
				imgurl:''
			};
		},
		components: {
			ImageCropper
		},
		methods: {
			backOne() {
				uni.navigateBack()
			},
			choose(e) {
				var a = this.user[e]
				this.user[e].ischoose = !this.user[e].ischoose
				//添加到已选择数组
				if(a.ischoose){
					this.selectuser.push({id:a._id})
				}else{
				//从已选择数组中删除
					var num;
					for(var i in this.selectuser){
						if(this.selectuser[i].id === a.id){
							num=i
						}
					}
					this.selectuser.splice(num,1)
				}
				// console.log(this.selectuser);
				// console.log(this.user);
				// this.user.splice(e, 1, a)
			},
			getuser() {
				this.user = this.FriendList
				this.user.forEach(item => {
					item.ischoose = false
				})
			},
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift();
					},
				});
			},
			confirm(e) {
				this.tempFilePath = "";
				this.cropFilePath = e.detail.tempFilePath;
				uni.uploadFile({
				        url: "http://localhost:3000/files/upload",
				        filePath: this.cropFilePath,
				        name: "file",
				        fileType: "image",
				        formData:{
							id:this.id
						},
				        success: (uploadFileRes) => {
				          var backstr = uploadFileRes.data;
						  this.imgurl = backstr
				          //自定义操作
				        },

				        fail(e) {
				          console.log("this is errormes " + e.message);
				        },
				      });

			},
			cancel() {
				// console.log("canceled");
				this.tempFilePath = "";
			},
			 newGroup(){
				if(!this.flag) return 
				this.addGroup()
			},
			async addGroup(){
				if(this.imgurl!=''){
					var a = {
						userId:this.id,
						name:this.name,
						cover:this.imgurl
					}
				}else{
					var a = {
						userId:this.id,
						name:this.name,
					}
				}
				const {data} = await this.request({
					url:'/group/create',
					method:'POST',
					data:a
				})
				if(data.status==200){
					console.log(data.data);
					this.addmember(data.data)
				}
			},
			async addmember(id){
				// this.selectuser.push({id:this.id})
				var {data} = await this.request({
					url:'/group/add',
					method:'POST',
					data:{
						userlist:[...this.selectuser,{id:this.id}],
						gid:id
					}
				})
				if(data.status == 200){
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}
			},
			async nameExist(){
				if(this.name == '') return
				var {data} = await this.request({
					url:'/group/exist',
					data:{
						name:this.name
					}
				})
				if(data.status ===200){
					this.flag = true
				}else{
					uni.showToast({
						icon:"error",
						title:"该群已存在"
					})
				}
			}
		},
		onLoad() {
			this.getuser()
		},
		computed:{
			btn(){
				if(this.flag){
					return '#FFE431'
				}else{
					return '#F3F4F6'
				}
			},...mapState(['FriendList','id'])
		}
		
	}
</script>

<style lang="scss">
	@import "../../common/css/base.scss";

	.top-bar {
		@include top-bar();

		.top-bar-left {
			font-size: 32rpx;
			color: #272832;
			text-align: center;
		}

		.top-bar-center {
			text-align: center;
			font-size: 40rpx;
			color: #272832;
			margin-right: 296rpx;
		}
	}

	.main {
		padding: 88rpx 32rpx 110rpx;
		box-sizing: border-box;

		.main-top {
			position: fixed;
			// left: 0;
			// top: 0;
			background: #FFF;
			z-index: 999;
			.title {
				margin: 40rpx 0 20rpx;
				font-size: 44rpx;
				color: #272832;
				font-weight: 600;
			}
			
		}

		.group-avatar {
			position: relative;
			padding: 60rpx 0;
			text-align: center;

			.avatar {
				width: 160rpx;
				height: 160rpx;
				padding: 18rpx;
				background: #FFE431;
				box-shadow: 0px 36px 40px 0px rgba(39, 40, 50, 0.1);
				border-radius: 40px;
			}

			.pen {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				top: 50%;
				left: 50%;
				transform: translate3d(-50%, -50%, 0);
				pointer-events: none;
			}
		}

		.group-name {
			width: 686rpx;
			height: 92rpx;
			background: #F3F4F6;
			border-radius: 46rpx;
			padding: 24rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			color: #272832;
			text-align: center;
		}

		.group-list {
			padding-top: 510rpx;
			
			.member {
				padding: 20rpx 0;
				height: 80rpx;
				display: flex;
				align-items: center;

				.choose {
					text-align: center;
					line-height: 48rpx;
					width: 48rpx;
					height: 48rpx;
					border-radius: 24rpx;


					.dui {
						font-weight: 600;
					}
				}

				.avatar {
					padding: 32rpx;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 20rpx;
					}

				}
			}

		}
	}

	.group-bottom {
		padding: 12rpx 0;
		position: fixed;
		bottom: 0;
		background-color: #FFF;
		width: 100%;

		.group-btn {
			// background: #FFE431;
			width: 686rpx;
			height: 80rpx;
			margin: auto;
			border-radius: 10rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 32rpx;
			color: #272832;
		}
	}
</style>
